<template>
  <div class="pass-word-reset-pre">
    <vx-title-bar current="1" :list="['录入信息', '提交结果']"></vx-title-bar>
    <ui-form ref="userForm" :model="userForm" :rules="userRules" label-width="150px" label-position="right" class="vx-form">
      <ui-form-item label="登录ID" prop="loginId">
        {{ userForm.loginId }}
      </ui-form-item>
      <ui-form-item label="用户名" prop="userName">
        {{ userForm.userName }}
      </ui-form-item>
      <ui-form-item label="登录密码" prop="password">
        <ui-input v-model="userForm.password" type="passWord" placeholder="请输入密码"></ui-input>
      </ui-form-item>
      <ui-form-item label="重复登录密码" prop="confirmPassword">
        <ui-input v-model="userForm.confirmPassword" type="passWord" placeholder="请输入确认密码"></ui-input>
      </ui-form-item>
      <div class="text-center mg-top-40">
        <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
        <ui-button class="primary-long-btn" @click="submit" :loading="isBtnLoading">确认</ui-button>
      </div>
    </ui-form>
    <vx-dialog hide-cancel :message="msg" v-model="showDialog"> </vx-dialog>
  </div>
</template>

<script>
import userApi from '@/api/user';

// eslint-disable-next-line vue/require-name-property
export default {
  data() {
    /**
     * @description 校验8到16位数字字母组合
     */
    let cifNoRule = function (rule, value, callback) {
      const prefix = rule.prefix || '';
      const min = rule.min || 8;
      const max = rule.max || 16;
      const regu = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9!@#$%^&*_]{8,16}$/;
      if (value && value !== null) {
        if (!regu.test(value)) {
          return callback(new Error(`请输入${min}位到${max}的${prefix}`));
        } else {
          return callback();
        }
      } else {
        return callback();
      }
    };
    return {
      userForm: {
        ...this.getData(),
        password: '',
        confirmPassword: '',
      },
      isBtnLoading: false,
      showDialog: false,
      msg: '', //弹框内容
      userRules: {
        password: [
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          { validator: cifNoRule, min: 8, max: 16, prefix: '数字、字母组合', trigger: ['change', 'blur'] },
        ],
        confirmPassword: [
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          { validator: cifNoRule, min: 8, max: 16, prefix: '数字、字母组合', trigger: ['change', 'blur'] },
        ],
      },
    };
  },
  methods: {
    /**
     * @description 提交跳转页面
     */
    async submit() {
      this.$refs['userForm'].validate(async (valid) => {
        // 表单校验通过
        if (valid) {
          try {
            if (this.userForm.password !== this.userForm.confirmPassword) {
              this.showDialog = true;
              this.msg = '两次密码输入不一致';
              return;
            }
            this.isBtnLoading = true;
            const res = await userApi.userPassword({ ...this.userForm });
            this.setData({ res: res });
            this.$router.replace({ path: '/system/user/passWordResetRes' });
          } finally {
            this.isBtnLoading = false;
          }
        } else {
          this.$nextTick(() => {
            document.querySelectorAll('.is-error')[0].querySelector('input').focus();
          });
        }
      });
    },
  },
  /**
   * @description 跳转的页面不是结果页清除数据
   */
  beforeRouteLeave(to, from, next) {
    if (to.path !== '/system/user/passWordResetRes') {
      this.clearData();
    }
    next();
  },
};
</script>
